<template>
  <div class="chanpin">
    <div class="chanpin1"></div>
    <div class="chanpin_main">
      <ul class="chanpin_nav">
        <li
          v-for="(item, index) in navlist"
          :key="index"
          @click="goindex(index, item.id)"
          :style="{ color: index == currindex ? 'blue' : 'black' }"
        >
          {{ item.name }}
        </li>
      </ul>
      <!-- 内容 -->
      <div class="chanpin_center" v-if="currindex == 0">
        <div class="home_list">
          <ul class="home_list_item">
            <li v-for="(item, index) in quanbulist" :key="index">
              <img :src="item.pic" alt="" />
              <p>{{ item.name }}</p>
              <p class="p1">￥{{ item.minPrice.toFixed(2) }}</p>
            </li>
          </ul>
        </div>
      </div>
      <div class="chanpin_center" v-if="currindex == 1">
        <div class="home_list">
          <ul class="home_list_item">
            <li v-for="(item, index) in xilist" :key="index">
              <img :src="item.pic" alt="" />
              <p>{{ item.name }}</p>
              <p class="p1">￥{{ item.minPrice.toFixed(2) }}</p>
            </li>
          </ul>
        </div>
      </div>
      <div class="chanpin_center" v-if="currindex == 2">
        <div class="home_list">
          <ul class="home_list_item">
            <li v-for="(item, index) in tjlist" :key="index">
              <img :src="item.pic" alt="" />
              <p>{{ item.name }}</p>
              <p class="p1">￥{{ item.minPrice.toFixed(2) }}</p>
            </li>
          </ul>
        </div>
      </div>
      <div class="chanpin_center" v-if="currindex == 3">
        <div class="home_list">
          <ul class="home_list_item">
            <li v-for="(item, index) in jplist" :key="index">
              <img :src="item.pic" alt="" />
              <p>{{ item.name }}</p>
              <p class="p1">￥{{ item.minPrice.toFixed(2) }}</p>
            </li>
          </ul>
        </div>
      </div>
      <div class="chanpin_center" v-if="currindex == 4">
        <div class="home_list">
          <ul class="home_list_item">
            <li v-for="(item, index) in yslist" :key="index">
              <img :src="item.pic" alt="" />
              <p>{{ item.name }}</p>
              <p class="p1">￥{{ item.minPrice.toFixed(2) }}</p>
            </li>
          </ul>
        </div>
      </div>
      <div class="chanpin_center" v-if="currindex == 5">
        <div class="home_list">
          <ul class="home_list_item">
            <li v-for="(item, index) in rflist" :key="index">
              <img :src="item.pic" alt="" />
              <p>{{ item.name }}</p>
              <p class="p1">￥{{ item.minPrice.toFixed(2) }}</p>
            </li>
          </ul>
        </div>
      </div>
      <!-- 1111 -->
      <div v-if="currindex == 6">
        <div class="chanpin_center" v-if="code == 0">
          <div class="home_list">
            <ul class="home_list_item">
              <li v-for="(item, index) in sclist" :key="index">
                <img :src="item.pic" alt="" />
                <p>{{ item.name }}</p>
                <p class="p1">￥{{ item.minPrice.toFixed(2) }}</p>
              </li>
            </ul>
          </div>
        </div>
        <div v-else class="chanpin_img">
          <img src="../assets/6.png" alt="" />
        </div>
      </div>
      <div class="chanpin_center" v-if="currindex == 7">
        <div class="home_list">
          <ul class="home_list_item">
            <li v-for="(item, index) in xplist" :key="index">
              <img :src="item.pic" alt="" />
              <p>{{ item.name }}</p>
              <p class="p1">￥{{ item.minPrice.toFixed(2) }}</p>
            </li>
          </ul>
        </div>
      </div>
      <div v-if="currindex == 8">
        <div class="chanpin_center" v-show="code == 0">
          <div class="home_list">
            <ul class="home_list_item">
              <li v-for="(item, index) in rxlist" :key="index">
                <img :src="item.pic" alt="" />
                <p>{{ item.name }}</p>
                <p class="p1">￥{{ item.minPrice.toFixed(2) }}</p>
              </li>
            </ul>
          </div>
        </div>
        <div v-show="code == 700">
          <img src="../assets/6.png" alt="" />
        </div>
      </div>
      <div v-if="currindex == 9">
        <div class="chanpin_center">
          <div class="home_list">
            <ul class="home_list_item">
              <li v-for="(item, index) in molist" :key="index">
                <img :src="item.pic" alt="" />
                <p>{{ item.name }}</p>
                <p class="p1">￥{{ item.minPrice.toFixed(2) }}</p>
              </li>
            </ul>
          </div>
        </div>
        <div v-show="code == 700">
          <img src="../assets/6.png" alt="" />
        </div>
      </div>
      <div v-if="currindex == 10">
        <div class="chanpin_center">
          <div class="home_list">
            <ul class="home_list_item">
              <li v-for="(item, index) in hflist" :key="index">
                <img :src="item.pic" alt="" />
                <p>{{ item.name }}</p>
                <p class="p1">￥{{ item.minPrice.toFixed(2) }}</p>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import axios from "axios";
import { reactive, ref, onMounted } from "vue";
const currindex = ref(0);
const navlist = reactive([
  {
    id: 1,
    name: "全部商品",
  },
  {
    id: 2,
    name: "洗面奶",
  },
  {
    id: 3,
    name: "特价区",
  },
  {
    id: 4,
    name: "精品促销",
  },
  {
    id: 5,
    name: "眼霜/面膜",
  },
  {
    id: 6,
    name: "润肤面霜",
  },
  {
    id: 7,
    name: "市场热推产品",
  },
  {
    id: 8,
    name: "新品上市",
  },
  {
    id: 9,
    name: "热销产品",
  },
  {
    id: 10,
    name: "面膜",
  },
  {
    id: 11,
    name: "护肤套装",
  },
]);
const code = ref(null);
onMounted(() => {
  axios({
    url: "https://api.it120.cc/dovey/shop/goods/list",
    method: "post",
    params: {
      page: 1,
      pageSize: 10,
    },
  }).then((res) => {
    console.log(res);
    quanbulist.value = res.data.data;
  });

  axios({
    url: "https://api.it120.cc/dovey/shop/goods/list",
    method: "post",
    params: {
      page: 1,
      categoryId: 117515,
      pageSize: 10,
    },
  }).then((res) => {
    console.log(res);
    xilist.value = res.data.data;
  });

  axios({
    url: "https://api.it120.cc/dovey/shop/goods/list",
    method: "post",
    params: {
      page: 1,
      categoryId: 117516,
      pageSize: 10,
    },
  }).then((res) => {
    console.log(res);
    tjlist.value = res.data.data;
  });
  axios({
    url: "https://api.it120.cc/dovey/shop/goods/list",
    method: "post",
    params: {
      page: 1,
      categoryId: 117514,
      pageSize: 10,
    },
  }).then((res) => {
    console.log(res);
    jplist.value = res.data.data;
  });
  axios({
    url: "https://api.it120.cc/dovey/shop/goods/list",
    method: "post",
    params: {
      page: 1,
      categoryId: 117517,
      pageSize: 10,
    },
  }).then((res) => {
    console.log(res);
    yslist.value = res.data.data;
  });
  axios({
    url: "https://api.it120.cc/dovey/shop/goods/list",
    method: "post",
    params: {
      page: 1,
      categoryId: 117518,
      pageSize: 10,
    },
  }).then((res) => {
    console.log(res);
    rflist.value = res.data.data;
  });
  axios({
    url: "https://api.it120.cc/dovey/shop/goods/list",
    method: "post",
    params: {
      page: 1,
      categoryId: 117520,
      pageSize: 10,
    },
  }).then((res) => {
    console.log(res);
    xplist.value = res.data.data;
  });

  axios({
    url: "https://api.it120.cc/dovey/shop/goods/list",
    method: "post",
    params: {
      page: 1,
      categoryId: 117521,
      pageSize: 10,
    },
  }).then((res) => {
    console.log(res);
    code.value = res.data.code;
    rxlist.value = res.data.data;
  });
  axios({
    url: "https://api.it120.cc/dovey/shop/goods/list",
    method: "post",
    params: {
      page: 1,
      categoryId: 117522,
      pageSize: 10,
    },
  }).then((res) => {
    console.log(res.data.code);
    molist.value = res.data.data;
    code.value = res.data.code;
  });
  axios({
    url: "https://api.it120.cc/dovey/shop/goods/list",
    method: "post",
    params: {
      page: 1,
      categoryId: 117523,
      pageSize: 10,
    },
  }).then((res) => {
    console.log(res.data.code);
    hflist.value = res.data.data;
    code.value = res.data.code;
  });
});
const goindex = (index, id) => {
  currindex.value = index;
  if (id == 7) {
    axios({
      url: "https://api.it120.cc/dovey/shop/goods/list",
      method: "post",
      params: {
        page: 1,
        categoryId: 117519,
        pageSize: 10,
      },
    }).then((res) => {
      console.log(res);
      code.value = res.data.code;
      sclist.value = res.data.data;
    });
  }
};
// 全部列表
const quanbulist = ref([]);
// 洗面奶列表
const xilist = ref([]);
// 特价列表
const tjlist = ref([]);
// 精品列表
const jplist = ref([]);
// 眼霜列表
const yslist = ref([]);
// 润肤列表
const rflist = ref([]);
// 市场列表
const sclist = ref([]);
// 新品列表
const xplist = ref([]);
// 热销列表
const rxlist = ref([]);
// 面霜列表
const molist = ref([]);
// 护肤列表
const hflist = ref([]);
</script>

<style scoped lang="less">
img {
  width: 200px;
}
.chanpin1 {
  width: 100%;
  height: 300px;
  background: linear-gradient(90deg, #44e9ba, #527dff);
}
.chanpin {
  width: 100%;
  height: 100%;
  background: #f5f5f5;
}
.chanpin_main {
  width: 1200px;
  height: auto;
  background: #fff;
  border-radius: 6px;
  margin: -25px auto;

  .chanpin_nav {
    width: 100%;
    display: flex;
    padding: 20px;
    margin: 0;
    justify-content: left;
    li {
      width: 90px;
      text-align: center;
      font-size: 14px;
      list-style: none;
    }
  }
  .home_list {
    width: 1200px;
    height: auto;
    margin: 0 auto;
    .home_list_item {
      width: 1200px;
      flex-wrap: wrap;
      justify-content: left;
      align-items: center;
      display: flex;
      padding: 0;
      margin: 0;
      li {
        width: 280px;
        height: 380px;
        list-style: none;
        margin-left: 10px;
        margin-right: 10px;
        box-sizing: border-box;
        margin-bottom: 20px;
        border: 2px solid #e6e6e6;
        img {
          width: 100%;
          height: 248px;
        }
        p {
          font-size: 14px;
          font-weight: bold;
          text-align: center;
        }
        .p1 {
          text-align: center;
          color: red;
          font-size: 18px;
          padding: 0;
          margin: 0;
        }
      }
    }
  }
}
</style>